<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="../../src/all.css">
  <title>Document</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
    }

    .xm-select-demo {
      width: 100%;
    }
  </style>
</head>

<body style="background: #fff;">
  <div class="main layui-fluid">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label" for="">关键词搜索</label>
        <div class="layui-input-block">
          <!-- <input type="text" name="guanjian" class="layui-input"> -->
          <div id="keyword" class="xm-select-demo">
          </div>
        </div>
      </div>
      <hr>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">责任部门</label>
          <div class="layui-input-block">
            <div id="bumen" class="xm-select-demo" style="width:500px;">
            </div>
            <!-- <input type="text" name="date" id="layer-open" autocomplete="off" class="layui-input"> -->
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">检查地点</label>
          <div class="layui-input-inline">
            <select name="mudoles" lay-search="">
              <option value="">直接选择或搜索选择</option>
              <option value=" 1">五矿/已17-23042采面</option>
              <option value="1">五矿/已17-23160采面</option>
              <option value="1">五矿/已17-23240采面</option>
              <option value="1">五矿/已17-23322采面</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">详细地点</label>
          <div class="layui-input-inline">
            <select name="modules" lay-verify="required" lay-search="">
              <option value=""></option>
              <option value="1">1304轨道顺槽</option>
              <option value="1">1304轨道顺槽</option>
              <option value="1">1304轨道顺槽</option>
              <option value="1">1304轨道顺槽</option>
              <option value="1">1304轨道顺槽</option>
            </select>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">检查日期</label>
          <div class="layui-input-inline">
            <input type="text" name="date" id="date" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class=" layui-inline">
          <label class="layui-form-label">班次</label>
          <div class="layui-input-inline" style="width:300px;">
            <input type="radio" name="class" value="早班" title="早班">
            <input type="radio" name="class" value="中班" title="中班" checked>
            <input type="radio" name="class" value="晚班" title="晚班" checked>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">检查人</label>
          <div class="layui-input-inline">
            <select name="interest" lay-filter="aihao">
              <option value="">请选择</option>
              <option value="0">001</option>
              <option value="1">007</option>
              <option value="1">管理员</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">陪检人</label>
          <div class="layui-input-inline">
            <select name="interest" lay-filter="aihao">
              <option value="">请选择</option>
              <option value="0">管理员</option>
              <option value="1">管理员</option>
              <option value="1">管理员</option>
            </select>
          </div>
        </div>
      </div>
      <hr>
      <div class="layui-form-item">
        <div class="layui-inline vertop">
          <div class="layui-sel-inline">
            <input type="checkbox" name="like1[write]" lay-skin="primary" title="带班领导" checked="">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">行走线路</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="" class="layui-form-label">隐患内容</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="" class="layui-form-label">整改要求</label>
        <div class="layui-input-block">
          <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label for="" class="layui-form-label">隐患等级</label>
          <div class="layui-input-block">
            <select name="modules" id="">
              <option value=""></option>
              <option value="">一般隐患</option>
              <option value="">重大隐患</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label for="" class="layui-form-label">隐患种类</label>
          <div class="layui-input-block">
            <select name="modules" id="">
              <option value=""></option>
              <option value="">所有</option>
              <option value="">采煤</option>
              <option value="">一通三防</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label for="" class="layui-form-label">标准条款</label>
          <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label for="" class="layui-form-label">单位罚款</label>
          <div class="layui-input-block">
            <input type="text" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label for="" class="layui-form-label">个人罚款</label>
          <div class="layui-input-block">
            <input type="text" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label for="" class="layui-form-label">单位罚款范围</label>
          <div class="layui-input-block">
            <input type="text" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label for="" class="layui-form-label">个人罚款范围</label>
          <div class="layui-input-block">
            <input type="text" class="layui-input">
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="" class="layui-form-label">上传图片</label>
        <div class="layui-input-block">
          <div class="layui-upload-drag" id="test10">
            <i class="layui-icon"></i>
            <p>点击上传，或将文件拖拽到此处</p>
            <div class="layui-hide" id="uploadDemoView">
              <hr>
              <img src="" alt="上传成功后渲染" style="max-width: 196px">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <fieldset class="layui-elem-field">
          <legend>上传文件</legend>
          <div class="layui-field-box">
            <div class="layui-upload">
              <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
              <div class="layui-upload-list">
                <table class="layui-table">
                  <thead>
                    <tr>
                      <th>文件名</th>
                      <th>大小</th>
                      <th>状态</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody id="demoList"></tbody>
                </table>
              </div>
              <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
          </div>
        </fieldset>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label for="" class="layui-form-label">要求完成时间</label>
          <div class="layui-input-block">
            <input type="text" id="date1" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <input type="radio" name="like1[write]" lay-skin="primary" title="当天整改">
          <input type="radio" name="like1[write]" lay-skin="primary" title="一天整改">
          <input type="radio" name="like1[write]" lay-skin="primary" title="二天整改">
          <input type="radio" name="like1[write]" lay-skin="primary" title="三天整改">
        </div>
      </div>
      <div class="layui-form-item text-align-right">
        <button type="button" class="layui-btn">
          <i class="layui-icon">&#xe608;</i> 提交
        </button><button type="button" class="layui-btn">
          <i class="layui-icon">&#xe655;</i> 保存
        </button><button type="button" class="layui-btn">
          <i class="layui-icon">&#xe641;</i> 提交并下达
        </button><button type="button" class="layui-btn">
          <i class="layui-icon">&#x1006;</i> 关闭
        </button>
      </div>
    </form>
  </div>
  <script src="../../layuiadmin/layui/layui.js"></script>
  <script>
    layui.config({
      base: '/layuiAdmin/modules/'
    }).extend({
      xmSelect: 'xm-select'
    }).use(['form', 'layedit', 'laydate', 'jquery', 'upload', 'xmSelect'], function () {
      var form = layui.form
        , layer = layui.layer
        , layedit = layui.layedit
        , laydate = layui.laydate
        , $ = layui.jquery
        , upload = layui.upload
      const BUMEN = '/js/bumentree.json'
      //日期
      laydate.render({
        elem: '#date'
        , min: -3 //7天前
        , max: 0 //7天后
      });
      laydate.render({
        elem: '#date1'
      });
      $.ajax({
        url: BUMEN,
        success(res) {
          xmSelect.render({
            el: '#bumen',
            prop: {
              name: 'name',
              value: 'id',
            },
            name: 'bumen',
            radio: false,
            clickClose: false,
            model: { label: { type: 'text' } },
            tree: {
              show: true,
              strict: false,
              expandedKeys: [-1],
            },
            filterable: true,
            height: 'auto',
            data: res.data
          })
        }
      })


      // 关键词
      xmSelect.render({
        el: '#keyword',
        name: 'keyword',
        filterable: true,
        data: [
          { name: '采煤', value: 1 },
          { name: '采煤', value: 2 },
          { name: '采煤', value: 3 },
          { name: '采煤', value: 4 },
        ]
      })
      //拖拽上传
      upload.render({
        elem: '#test10'
        , url: 'https://httpbin.org/post' //改成您自己的上传接口
        , done: function (res) {
          layer.msg('上传成功');
          layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);
          console.log(res)
        }
      });
      //多文件列表示例
      var demoListView = $('#demoList')
        , uploadListIns = upload.render({
          elem: '#testList'
          , url: 'https://httpbin.org/post' //改成您自己的上传接口
          , accept: 'file'
          , multiple: true
          , auto: false
          , bindAction: '#testListAction'
          , choose: function (obj) {
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function (index, file, result) {
              var tr = $(['<tr id="upload-' + index + '">'
                , '<td>' + file.name + '</td>'
                , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                , '<td>等待上传</td>'
                , '<td>'
                , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                , '</td>'
                , '</tr>'].join(''));

              //单个重传
              tr.find('.demo-reload').on('click', function () {
                obj.upload(index, file);
              });

              //删除
              tr.find('.demo-delete').on('click', function () {
                delete files[index]; //删除对应的文件
                tr.remove();
                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
              });

              demoListView.append(tr);
            });
          }
          , done: function (res, index, upload) {
            if (res.files.file) { //上传成功
              var tr = demoListView.find('tr#upload-' + index)
                , tds = tr.children();
              tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
              tds.eq(3).html(''); //清空操作
              return delete this.files[index]; //删除文件队列已经上传成功的文件
            }
            this.error(index, upload);
          }
          , error: function (index, upload) {
            var tr = demoListView.find('tr#upload-' + index)
              , tds = tr.children();
            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
          }
        });


    });
  </script>
</body>

</html>